<template>
	<view>
		<view class="goods-list">
			<view v-for="(item,i) in services" :key="i" @click="tocontent(item.id)">
				<view class="goods-item">
					<!-- 左侧盒子 -->
					<view class="goods-item-left">
						<image :src="item.logo||defaultPic" class="goods-pic"></image>
					</view>
					<!-- 右侧盒子 -->
					<view class="goods-item-right">
						<!-- 商品的名称 -->
						<view class="goods-title">{{item.title}}</view>
						<!-- 价格 -->
						<view class="goods-info-box">
							<view class="goods-price1">超值价:&nbsp;</view>
							<view class="goods-price">¥{{item.price}}.00</view>
						</view>
						<view class="goods-content">{{item.remark}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				services: [],
				isLogin: true,
				num: '',
				name: '',
				defaultPic: '../../../static/images/mine/avater.png'
			};
		},
		onLoad: function(option) {
			// console.log('测试')
			this.name = option.name
			this.num = option.num
			// 获取页面数据
			this.getservices()
		},

		methods: {
			tocontent(id){
				// console.log(id)
				uni.navigateTo({
					url: `/pages/index/svcontent/svcontent?id=${id}`
				});
			},
			//获取地址信息
			getservices() {
				if (this.isLogin == true) {
					try {
						uni.request({
							url: 'http://localhost:8080/api/service/list',
							data: {
								name: this.name,
								num: this.num
							},
							method: 'GET',
							success: (res) => {
								if (res.data.code == '200') {
									this.services = res.data.data
									// console.log(this.services[0].name)
								} else {

								}
							}
						})

					} catch (e) {
						// error
					}
				}
			},
		},
	};
</script>

<style>
	.goods-item {
			display: flex;
			padding: 10px 5px;
			border-bottom: 1px solid #f0f0f0;
			margin-top: 20px;
			margin-left: 10px;
			margin-right: 10px;
			background-color: #fff;
			
			.goods-item-left {
				margin-right: 5xp;
	
				.goods-pic {
					width: 60px;
					height: 60px;
					display: block;
				}
			}
	
			.goods-item-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
	
				.goods-title {
					font-size: 18px;
					color: #1e8449;
				}
				
				.goods-content {
					font-size: 14px;
					
				}
	
				.goods-info-box {
					display: flex;
					align-items: center;
					
					.goods-price {
						color: #c00000;
						font-size: 16px;
					}
					
					.goods-price1 {
						font-size: 14px;
					}
				}
			}
		}
</style>